<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
</head>
<body>
<div>
    <p align="center">品种
        <select name="breed">
            <option value="0">请选择</option>
            <option value="1">狗</option>
            <option value="2">猫</option>
            <option value="3">鱼</option>
        </select>
        <input type="button" name="bt1" onclick="load()" value="查询">
        <a href="">新增宠物</a>
    </p>
    <table align="center" border="1px" id="tb1">
    <%--    <tr>
            <td>宠物昵称</td>
            <td>出生日期</td>
            <td>性别</td>
        </tr>--%>
    </table>
</div>

</body>
<script>

    function load() {
        $.ajax({
            "url": "/PetManage_war_exploded/ListServlet",
            //"data"
            "dataType": "json",
            "type": "get",
            "success": function (data) {
                console.log(data);
                //<tr><td>宠物昵称</td><td>出生日期</td><td>性别</td></tr>
                var str="<tr><td>宠物昵称</td><td>出生日期</td><td>性别</td></tr>";
                $(data).each(function (index) {
                    str = str + "<tr><td>"+ this.petName +"</td><td>"+ this.birthday +"</td><td>"+ this.petSex +"</td></tr>";
                })
                $("#tb1").html(str);
            }
        })
    }

    load();

</script>
</html>
